<template>
  <!-- 我的登录页面 -->

  <van-card
    theme="dark"
    class="cardshow"
    desc="尊贵的铂金会员用户"
    title="河岸西"
    thumb="https://img.gejiba.com/images/46889b597f5aa15b122297dfdb19d98c.jpg"
  >
    <template #tags>
      <van-tag plain type="primary">导航小能手</van-tag>
    </template>
  </van-card>

  <van-cell-group inset>
    <van-cell icon="shop" title="服务" value=">" size="large" />
    <van-cell icon="checked" title="收藏" value=">" size="large" />
    <van-cell
      icon="smile-comment"
      title="卡包"
      label="查看优惠券"
      value=">"
      size="40px"
    />
    <van-cell icon="smile" title="表情" value=">" size="large" />
    <van-cell
      icon="setting"
      title="设置"
      label="更改设置"
      value=">"
      size="large"
    />
    <van-cell
      icon="browsing-history"
      title="出行"
      value=">"
      label="添加您的出行计划"
      size="large"
    />
  </van-cell-group>
  <img
    class="swipe"
    src="https://img.gejiba.com/images/84038aba373862c2240ba479d058d64e.png"
    alt=""
  />
  <img
    class="swipe"
    src=" https://img.gejiba.com/images/cf2847c7923fd860130f2270e92c66bd.png"
    alt=""
  />
  <img
    class="swipe"
    src=" https://img.gejiba.com/images/5b237cdf7a08b4a812a4ef662c809b3b.png"
    alt=""
  />
  <img
    class="swipe"
    src=" https://img.gejiba.com/images/e9ec40a3085b539a45e055d8d50abf7e.png"
    alt=""
  />
  <img
    class="swipe"
    src="https://img.gejiba.com/images/07c3857dba11260aeed1cdeaed505477.png"
    alt=""
  />
  <img
    class="swipe"
    src="https://img.gejiba.com/images/7d77922c18baa89458604a98ac39ec29.png"
    alt=""
  />
  <van-tabbar v-model="active">
    <van-tabbar-item badge="3">
      <span>自定义</span>
      <template #icon="props">
        <img :src="props.active ? icon.active : icon.inactive" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
const active = ref(0)
const icon = {
  active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
  inactive: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
}
</script>

<style>
/* .cardshow {
  height: 15vh;
  font-size: 16px;
} */
.swipe {
  width: 20%;
  height: 10vh;
  margin: 20px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #fff;
}
</style>
